<template>
  <div class="shop-list-con table-gl-w">
    <div class="search-w">
      <a-space style="padding: 5px 0">
        <a-input-group>
          <a-select :style="{ width: '80px' }" v-model="searchValue.textMatch" @change="search">
            <a-option value="EXACT">精确</a-option>
            <a-option value="BROAD">模糊</a-option>
          </a-select>
          <a-input v-model="searchValue.keywordText" allow-clear :style="{ width: '300px' }" placeholder="请输入关键词" @press-enter="search" />
        </a-input-group>

        <a-range-picker @change="search" v-model="searchValue.time" :disabledDate="disabledDate" :style="{ width: 300 + 'px' }" :allow-clear="false" shortcuts-position="left" :shortcuts="rangeShortcuts()" />

        <a-select placeholder="请选择匹配类型" allow-clear multiple v-model="searchValue.matchTypes" :style="{ width: 140 + 'px' }">
          <a-option value="EXACT">精准</a-option>
          <a-option value="BROAD">词组</a-option>
          <a-option value="PHRASE">广泛</a-option>
        </a-select>

        <a-button type="primary" @click="search">搜索</a-button>
      </a-space>
    </div>

    <searchKeywordAdChart ref="SearchKeywordAdChart" :searchParams="searchParams" class="mt5" />

    <div class="table-gl-con mt10">
      <TableWrap style="flex: 1" @refresh="getList">
        <template #headerLeft>
          <a-space> </a-space>
        </template>
        <template #tableBody>
          <a-table :data="tableData" @sorter-change="sorterChange" size="mini" row-key="id" v-model:selected-keys="ids" :row-selection="{ type: 'checkbox', showCheckedAll: true, onlyCurrent: false }" class="table-two-line" :loading="loading" :pagination="false" :scroll="{ x: '100%', y: '100%' }">
            <template #columns>
              <!-- <a-table-column type="index" title="序号" :width="40"></a-table-column> -->
              <a-table-column fixed="left" title="关键词" #cell="{ record }" :width="120">
                <a-space class="title-con">
                  <p class="highlight">{{ record.keywordText }}</p>
                  <CopyText class="my-copy-class" :val="record.keywordText"></CopyText>
                </a-space>
                <!-- <div>12312312</div> -->
              </a-table-column>
              <a-table-column fixed="left" title="操作" #cell="{ record }" :width="80">
                <div class="cursor highlight" @click="showModal(record, '添加投放')"> 添加投放 </div>
                <div class="cursor highlight" @click="showModal(record, '添加否定')"> 添加否定 </div>
              </a-table-column>
              <a-table-column fixed="left" title="在投广告数" #cell="{ record }" :width="80">
                {{ record.campaignNum }}
              </a-table-column>
              <a-table-column fixed="left" title="匹配类型" #cell="{ record }" :width="80">
                <p v-if="KeywordMatchType[record.matchType]">{{ KeywordMatchType[record.matchType] }}匹配</p>
              </a-table-column>

              <a-table-column title="竞价" #cell="{ record }" :width="80" data-index="bid" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                <p>
                  <span>{{ getCurrencySymbol(record.marketplaceId) }}</span>
                  <span>{{ record.bid }}</span>
                </p>
              </a-table-column>
              <a-table-column title="曝光量" #cell="{ record }" :width="80" data-index="impressions" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                {{ record.impressions }}
              </a-table-column>
              <a-table-column title="点击量" #cell="{ record }" :width="80" data-index="clicks" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                {{ record.clicks }}
              </a-table-column>
              <a-table-column title="CTR" #cell="{ record }" :width="80" data-index="ctr" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                {{ record.ctr }}
              </a-table-column>
              <a-table-column title="广告销量" #cell="{ record }" :width="100" data-index="purchasesSale" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                {{ record.purchasesSale }}
              </a-table-column>
              <a-table-column title="CVR" #cell="{ record }" :width="80" data-index="cvr" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                {{ record.cvr }}
              </a-table-column>
              <a-table-column title="花费(USD)" #cell="{ record }" :width="80" data-index="cost" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                <p v-if="record.cost || record.cost === 0">${{ Number(record.cost).toFixed(2) }}</p>
                <p v-else>--</p>
              </a-table-column>
              <a-table-column title="CPC(USD)" #cell="{ record }" :width="80" data-index="cpc" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                <p v-if="record.cpc || record.cpc === 0">${{ Number(record.cpc).toFixed(2) }}</p>
                <p v-else>--</p>
              </a-table-column>
              <a-table-column title="广告销售额(USD)" #cell="{ record }" :width="120" data-index="saleAmount" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                <p v-if="record.saleAmount || record.saleAmount === 0">${{ Number(record.saleAmount).toFixed(2) }}</p>
                <p v-else>--</p>
              </a-table-column>
              <a-table-column title="ACOS" #cell="{ record }" :width="80" data-index="acos" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                <p v-if="record.acos || record.acos === 0">{{ Number(record.acos).toFixed(2) }}%</p>
                <p v-else>--</p>
              </a-table-column>
              <a-table-column title="ROAS" #cell="{ record }" :width="80" data-index="roas" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                <p v-if="record.roas || record.roas === 0">{{ Number(record.roas).toFixed(2) }}</p>
                <p v-else>--</p>
              </a-table-column>
            </template>
          </a-table>
        </template>
      </TableWrap>
      <div class="pagination-footer">
        <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
      </div>
    </div>
  </div>

  <AddNegationOrThrow v-if="showNegationOrThrowModal" v-model="showNegationOrThrowModal" :title="title" :info="info" />
</template>

<script lang="ts" setup>
  import { defineComponent, ref, onMounted } from 'vue'
  import { getOrganizesUser } from '@/api/system'
  import { Message } from '@arco-design/web-vue'
  import { getStartAndEndTime, rangeShortcuts } from '../common'
  import { KeywordMatchType, SearchTermTargetingObjType, AdTypes } from '../types'
  import { marketPlaceList, currencySymbol } from '@/utils/globalData'
  import { getKeywordLibraryList } from '@/api/advert'
  import useAdvertStore from '@/store/modules/advert'
  import TableWrap from '@/components/TableWrap.vue'
  import searchKeywordAdChart from './components/searchKeywordAdChart.vue'
  import CopyText from '@/components/CopyText.vue'
  import AddNegationOrThrow from './components/AddNegationOrThrow.vue'
  import AddKeyword from './components/addKeyword.vue'
  import dayjs from 'dayjs'
  const advertStore = useAdvertStore()
  const SearchKeywordAdChart = ref()
  let tableData = ref([])
  let loading = ref(false)
  let showNegationOrThrowModal = ref(false)
  let showAddKeyword = ref(false)
  let id = ref([])
  let searchValue = ref({
    textMatch: 'EXACT',
    keywordText: '',
    time: advertStore.currentSearchTime || [],
    orderItems: null,
    matchTypes: '',
  })

  let searchParams = ref({})

  let title = ref<string>('add')
  let info = ref({})
  let pageNation = ref({ total: 0, pageNum: 1, pageSize: 20 })

  // 显示弹框
  const showModal = (row: any, type: string) => {
    info.value = row
    title.value = type
    showNegationOrThrowModal.value = true
  }

  // 搜索
  const search = async (info: any) => {
    await getList()
    await SearchKeywordAdChart.value.refreshData()
  }
  // 分页
  const changePage = (val: number) => {
    pageNation.value.pageNum = val
    getList()
  }

  const sizeChange = (val: number) => {
    pageNation.value.pageNum = 1
    pageNation.value.pageSize = val
    getList()
  }

  const getList = async () => {
    let params = {
      ...searchValue.value,
      pageNum: pageNation.value.pageNum,
      pageSize: pageNation.value.pageSize,
      startDate: searchValue.value.time[0],
      endDate: searchValue.value.time[1],
    }

    searchParams.value = params

    loading.value = true
    const res: any = await getKeywordLibraryList(params)
    loading.value = false
    if (res) {
      // tableData.value = res?.data?.records || []
      tableData.value = res?.data?.data || []
      pageNation.value.total = res?.data?.total || 0
    }
  }

  const sorterChange = (dataIndex: string, direction: string) => {
    if (!direction) {
      searchValue.value.orderItems = null
    } else {
      searchValue.value.orderItems = [
        {
          asc: direction == 'ascend' ? true : false,
          column: dataIndex,
        },
      ]
    }
    getList()
  }

  //禁用时间
  function disabledDate(current) {
    return dayjs(current).isAfter(dayjs().subtract(1, 'day'))
  }

  // 显示货币符号
  function getCurrencySymbol(marketplaceId: any) {
    let currency = marketPlaceList[marketplaceId]?.currency
    return currencySymbol[currency]
  }

  onMounted(async () => {
    await getList()
    await SearchKeywordAdChart.value.refreshData()
  })
</script>

<style lang="less" scoped>
  .shop-list-con {
    height: calc(100vh - @menuHeight);
  }

  .title-con {
    &:hover {
      .my-copy-class {
        display: inline-block;
      }
    }
    .my-copy-class {
      display: none;
    }
  }
</style>
